<template>
	<div class="info_config_page">
		<div class="flex align-center table-top-btns">
			<h5 class="flex align-center">
				<svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
			</h5>
			<el-button size="small" icon="el-icon-plus" class="add-btn" @click="addCategorys">新增分类</el-button>
		</div>
		<el-table :data="tableData" row-key="id" border :tree-props="{ children: 'children' }">
			<el-table-column align="center" label="ID" width="150" prop="id" />
			<el-table-column align="center" label="分类名称">
				<template slot-scope="scope">
				{{ scope.row.name }}
				</template>
			</el-table-column>
			<el-table-column label="状态" align="center" width="180">
				<template slot-scope="scope">
					<el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">
						{{ scope.row.status == 1 ? '启用' : '禁用' }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button size="mini" type="warning" @click="handleEnable(scope.row.id, scope.row.status)">{{ scope.row.status
						== 1 ? '禁用' : '启用' }}</el-button>
					<el-button size="mini" type="danger" @click="removeItem(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<custom-page ref="customPage" :total="total" @getList="getList" />
		<add ref="add" @getList="getList" :edit-item="editItem"></add>
	</div>
</template>
  
<script>
import { getCategoryList,updateCategory,insertCategory,deleteCategory,updateCategoryUp,updateCategoryDown } from '@/api/info'
import customPage from '@/components/customPage'
import add from './add'
export default {
	components:{customPage,add},
	data() {
		return {
			tableData: [],
			total: 0,
			editItem:{}
		}
	},
	methods: {
		// 添加分类
		addCategorys(){
      this.$refs.add.dialogVisible = true
      this.$refs.add.title = '添加分类'
		},
		// 编辑分类
		handleEdit(item){
			this.editItem=item
      this.$refs.add.dialogVisible = true
      this.$refs.add.title = '编辑分类'
		},
		// 列表项删除
		removeItem(id) {
			this.$confirm('您确定要删除吗?', '删除', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			}).then(() => {
				deleteCategory({
					id
				}).then(res => {
					this.$message({
						message: '删除成功',
						type: 'success'
					})
					this.getList()
				})
			})
		},
		handleEnable(id, enabled) {
			this.$confirm('确认要修改状态吗?', '删除', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			}).then(() => {
				if (enabled == 1) {
					updateCategoryDown(id).then(res => {
						this.$message({
							message: '操作成功',
							type: 'success'
						})
						this.getList()
					})
				} else {
					updateCategoryUp(id).then(res => {
						this.$message({
							message: '操作成功',
							type: 'success'
						})
						this.getList()
					})
				}
			})
		},
		// 获取列表
		getList() {
			const { page, pageSize } = this.$refs.customPage
			const params = {
				name: '',
				categoryCreateTime: '',
				page,
				pageSize
			}
			getCategoryList(params).then(res => {
				this.tableData = res.data
				this.total = res.total
				res.data.forEach(item => {
					this.firstLevel.push({
						id: item.id,
						name: item.name
					})
				})
			})
		},
	},
	mounted() {
		this.getList()
	}
}
</script>
  
<style lang="scss" scoped></style>
  